'use client'
import { Canvas } from "@react-three/fiber"
import styles from "./page.module.css"
import { Environment, Gltf, OrbitControls, PresentationControls } from "@react-three/drei"
import Link from "next/link"
import { Suspense, useState } from "react"
import { themes } from "./components/themes"
import { useRouter } from "next/navigation"


export default function Page() {

    const [themeNum, setThemeNum] = useState(1)
    const router = useRouter()

    return (
        <>

            <div className={styles.container}>
                <div className={styles.canvas}>
                    <Canvas>
                        <PresentationControls
                            enabled={true} // the controls can be disabled by setting this to false
                            global={false} // Spin globally or by dragging the model
                            cursor={true} // Whether to toggle cursor style on drag
                            snap={true} // Snap-back to center (can also be a spring config)
                            speed={1} // Speed factor
                            zoom={1} // Zoom factor when half the polar-max is reached
                            rotation={[0, 0, 0]} // Default rotation
                            polar={[0, Math.PI / 2]} // Vertical limits
                            azimuth={[-Math.PI / 2, Math.PI / 2]} // Horizontal limits
                        >
                            <ambientLight intensity={5} />
                            <Environment preset="city" />
                            <Gltf src="assets/factory_inside.glb" position={[0, -2, -14]} />
                            <Gltf src={themes[themeNum - 1].modelPath} position={[0, -0.4, -5]} rotation={[0, Math.PI / 3, 0]} />
                        </PresentationControls>
                    </Canvas>
                </div>
                <div className={styles.themes}>
                    <button onClick={()=>router.back()}>Вернуться к выбору раздела</button>
                    <h1>Раздел - Конструкция самолета.</h1>

                    <h2>{themes[themeNum - 1].name}</h2>
                    <p>{themes[themeNum - 1].description}</p>
                    {
                        themes[themeNum - 1].lectures.map((e) => (
                            <Link href={e.url} key={e.name}> <p>{e.name}</p> </Link>
                        ))
                    }
                    {
                        themes[themeNum - 1].tests.map((e) => (
                            <Link href={e.url} key={e.name}> <p>{e.name}</p> </Link>
                        ))
                    }

                </div>
                <div className={styles.navigation}>
                    <button onClick={() => setThemeNum(themeNum - 1)} disabled={themeNum <= 1 ? true : false}>{'<'}</button>
                    <div className={styles.lable}>
                        <p>Тема:</p>
                        <p>{themeNum}</p>
                    </div>
                    <button onClick={() => setThemeNum(themeNum + 1)} disabled={themes.length <= themeNum}>{'>'}</button>
                </div>
            </div>
        </>
    )
}